<template>
  <common-page title="资产拓扑">
    <el-button slot="header" @click="back">返 回</el-button>
    <div class="topology-wrap" slot="content">
      <div class="topology-chart-wrap" ref="container">
        <!--        <common-chart type="chart-tree" :dataset="dataset"></common-chart>-->
        <vue2-org-tree
          :data="tree"
          :horizontal="true"
          :render-content="renderContent"
          label-class-name="common-tree-class"
          :collapsable="collapsable"
          @on-expand="onExpand"
        ></vue2-org-tree>
      </div>
    </div>
  </common-page>
</template>

<script>
import CommonChart from "@/components/EChart/CommonChart";
import { getGroupTreeByName } from "@/api/apisecurity/apigroup/group";

export default {
  name: "topology",
  props: {
    groupName: {
      type: String,
    },
  },
  components: {
    CommonChart,
  },
  data() {
    return {
      dataset: {
        dimensions: ["name", "value"],
        source: [],
      },
      collapsable: true,
      tree: {},
    };
  },

  methods: {
    back() {
      this.$emit("close");
    },
    handleData(data, label = "label", value = "value") {
      const replace = (list) => {
        return list.reduce((r, c) => {
          let children = [];
          if (c.children) children = replace(c.children);
          r.push({
            label: c[label],
            value: c[value] || 0,
            children,
          });
          return r;
        }, []);
      };

      return replace(data);
    },
    getData() {
      getGroupTreeByName({
        groupName: this.groupName,
      }).then((res) => {
        if (res?.code === 200) {
          this.dataset.source = res.data;

          let tree = this.handleData(res.data, "name", "value");
          this.tree = tree[0];

          setTimeout(() => {
            this.$refs.container.scrollTo(
              0,
              this.$refs.container.scrollHeight / 2 -
                this.$refs.container.getBoundingClientRect().height / 2
            );
          }, 100);
        } else {
          this.dataset.source = [];
        }
      });
    },
    renderContent(h, item) {
      return (
        <el-tooltip content={item.label} placement="top-start" effect="light">
          <span> {item.label} </span>
        </el-tooltip>
      );
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    collapse(list) {
      list.forEach((item) => {
        if (item.expand) {
          item.expand = false;
        }
        item.children && this.collapse(item.children);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped lang="scss">
.topology-wrap {
  width: 100%;
  height: 100%;

  .topology-chart-wrap {
    width: 100%;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>

<style lang="scss">
.topology-wrap {
  .common-tree-class {
    font-size: 14px;
    color: #303133;
  }
  .org-tree-node-label-inner {
    max-width: 800px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>
